<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false">
				<ButtonGroup slot="extra">
					<Button type="primary" size="small" icon="md-refresh" @click="queryInquiryList()"></Button>
				</ButtonGroup>
				<TabPane label="询价单列表" name="return">
					<div style="margin-bottom:10px;">
						<span>状态</span>
						<Select v-model="params.type" style="width:200px;margin-left: 10px;">
							<Option :value="0">待审核</Option>
							<Option :value="1">厂家审核通过</Option>
							<Option :value="2">未通过</Option>
							<Option :value="3">作废</Option>
						</Select>
						<Button type="primary" @click="queryInquiryList()">查询</Button>
					</div>
					<!--<div class="ivu-table-wrapper">
						<div class="ivu-table ivu-table-default ivu-table-border">
							<div class="ivu-table-header">
								<table style="width: 1636px;" border-collapse="separate">
									<thead>
										<tr>
											<th>车辆信息</th>
											<th>数量（辆）</th>
											<th>单价（万元）</th>
											<th>状态</th>
											<th>报价日期</th>
										</tr>
									</thead>
									<tbody v-for="(item,index) in  inquiryListInfo">
											<tr class="noTable">
												<td>
													<Row>
														<Col span="24">询价日期：{{item.createTime  | timeForm}}</Col>
														
													</Row>
												</td>
												<td>
													<Row>
														<Col span="24">单号：{{item.orderNum}}</Col>
													</Row>
												</td>
												<td>
													<Row>
														<Col span="12">联系人：{{item.principal}}</Col>
														<Col span="12">手机号：{{item.tel}}</Col>
													</Row>
												</td>
												<td>
													<Row>
														<Col span="24">
														{{['待审核', '厂家审核通过', '未通过','作废'][item.inquiryType]}}
														</Col>
													</Row>
													
												</td>
												<td>
													<Row>
														<Col span="24">
														
														</Col>
													</Row>
													
												</td>
											</tr>
											<tr class="noTable">
												<td>
													<Row>
														<Col span="24">期望交付日期：{{item.expectTime  | timeForm}}</Col>
													</Row>
												</td>
											
											</tr>
											&lt;!&ndash;<tr class="noTable">
												<td>
													<Row>
														<Col span="24">付款方式：{{['','分期', '全款'][item.payment]}}</Col>
													</Row>
												</td>
											
											</tr>&ndash;&gt;
											<tr class="noTable">
												<td>
													<Row>
														<Col span="24">询价截止日期：{{item.lastTime  | timeForm}}</Col>
													</Row>
												</td>
											</tr>
											<tr class="noTable">
												<td>
													<Row>
														<Col span="24">备注：{{item.note}}</Col>
											
													</Row>
												</td>
											
											</tr>
									
												<tr class="noTabletr" v-if="item.list" v-for="(carItem,i) in item.list">
													<td>
														<div class="serve-img-box">
															&lt;!&ndash;<img :src="carItem.carPhoto" alt=""/>&ndash;&gt;
															<div class="_carName">
																{{carItem.carName}}
															</div>
															<div class="_carType">
																{{carItem.typeName}} {{carItem.brandName}}
															</div>
															
														</div>
														
													</td>
													<td>
														<div class="serve-img-box">
																{{carItem.num}}
														</div>
													</td>
													<td></td><td></td><td></td>
												</tr>
									
											
											

										
									</tbody>

								</table>
								<div style="margin: 10px;overflow: hidden">
									<div style="float: right;">
										<Page :total="total" :current="1" show-sizer show-total transfer @on-change="changePage"
										 @on-page-size-change="changeSizePage"></Page>
									</div>
								</div>
							</div>

						</div>
					</div>-->


					<table-view ref="tableView" :tableCol='tableCol' :params='params' :requestUrl='requestUrl'></table-view>
				</TabPane>
			</Tabs>
		</Card>

	</div>
</template>

<script>
    import tableView from '../../components/table'
    import {
        formatDate
    } from '../utils/time.js'
	export default {
        components: {
            tableView
        },
		data() {
			return {
				total: 0,
                requestUrl: '/inquiry/list',
				inquiryListInfo:{},
                orderStatusList: {
                    0: '待审核',
                    1: '厂家审核通过',
                    2: '未通过',
                    3: '作废'
                },
				params: {
					pageNo: 1,
					pageSize: 10,
					type:''
				},
                tableCol: [
                    {
						title: '序号',
						type: 'index',
						width: 80,
						align: 'center'
					},
					{
						title: '单号',
						key: 'orderNum',
						minWidth: 130
					},
					{
						title: '车辆信息',
						minWidth: 120,
						render: (h, params) => {
						var arr = params.row.list;
						return h('div', arr.map(function (item,index) {
								return h('div',{
									style: {
										marginRight: '5px'
									}
								}, item.carName + ' * ' + item.num)
							}))
						}
					},
					{
						title: '联系人',
                        key: 'contact',
						minWidth: 100,
						align: 'center'
					},
					{
						title: '手机号',
						key: 'tel',
						minWidth: 100,
						align: 'center'
					},
					{
						title: '备注',
						key: 'note',
						minWidth: 100,
						align: 'center'
					},
					{
						title: '状态',
						minWidth: 100,
						align: 'center',
						render: (h, params) => {
							return h('div', this.orderStatusList[params.row.inquiryType])
						}
					},
					{
						title: '询价日期',
						key: 'createTime',
						minWidth: 110,
						align: 'center',
						render: (h, params) => {
						    if(params.row.createTime){
                                return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'))
							}else {
						        return '';
							}
						}
					},
					{
						title: '期望交付日期',
						key: 'expectTime',
						minWidth: 110,
						align: 'center',
						render: (h, params) => {
							if(params.row.expectTime){
								return h('div', formatDate(new Date(params.row.expectTime), 'yyyy-MM-dd hh:mm:ss'))
							}else {
								return '';
							}
						}
					},
					{
						title: '询价截止日期',
						key: 'deadlineTime',
						minWidth: 110,
						align: 'center',
						render: (h, params) => {
							if(params.row.deadlineTime){
								return h('div', formatDate(new Date(params.row.deadlineTime), 'yyyy-MM-dd hh:mm:ss'))
							}else {
								return '';
							}
						}
					},
					{
						title: '报价截止日期',
						key: 'quotationTime',
						minWidth: 110,
						align: 'center',
						render: (h, params) => {
							if(params.row.quotationTime){
								return h('div', formatDate(new Date(params.row.quotationTime), 'yyyy-MM-dd hh:mm:ss'))
							}else {
								return '';
							}
						}
					}
				],
			}


		},
		mounted() {
			this.queryInquiryList();

		},
		methods: {
			refreshData() {
				this.$refs['tableView'].getData()
			},
			operationDone() {
				this.$refs['tableView'].getData()
			},
			queryInquiryList() {
				this.$http.post('/inquiry/list', this.params).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.inquiryListInfo = res.data.data.rows
							this.total = res.data.data.total;
						}

					}

				})
			},
			// 改变当前页
			changePage(res) {
				this.params.pageNo = res;
				this.queryInquiryList();
			},
			// 改变当前页容量
			changeSizePage(res) {
				this.params.pageSize= res;
				this.queryInquiryList();
			}
		}
	}
</script>

<style scoped>
	
	th {
		padding-left: 18px;
		padding-right: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		box-sizing: border-box;
		word-wrap: normal;
		vertical-align: middle;

	}

	.noTable td {
		
		border-right: 0px solid #e8eaec;
		border-bottom: 1px solid #FFFFFF;
		text-align: center;
		    height: 25px;
	}
	.noTabletr td{
			border-right: 0px solid #e8eaec;
		border-bottom: 0px solid #e8eaec;
		text-align: center;
		    height: 25px;
	}
	
	.serve-img-box img{
		text-align: center;
	   width: 80px;
	   height: 60px;
	   
	}
	._carName{
		display: inline-block;
		margin: 15px 0 0 10px;
		position: absolute
	}
	.noTabletr:last-child td{
			border-bottom: 1px solid #e8eaec;
			margin-bottom: 10px;
	}
	.noTabletr .serve-img-box{
		    margin-bottom: 30px;
	}
</style>
